<template>
	<view>
		<view class="card">
			<view class="start-center">
				<view>
					<view class="sheet-dept">申请内容</view>
					<view class="center">
						<view class="title-bg"></view>
					</view>
				</view>
			</view>
			<view class="list-content">
				<view v-for="(item,index) in listCopy" class="list-item">
					<view class="item-content" :class="item.active?'active':''" @click="handleContent(item)">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="card mar-10-0">
			<view class="start-center">
				<view>
					<view class="sheet-dept">申请格式</view>
					<view class="center">
						<view class="title-bg"></view>
					</view>
				</view>
			</view>
			<view class="list-content">
				<u-radio-group v-model="form.copyType">
					<u-radio shape="circle" name='pdf'>电子PDF</u-radio>
					<u-radio shape="circle" name="pager">纸质复印</u-radio>
				</u-radio-group>
			</view>
			<view class="start-center">
				<view>
					<view class="sheet-dept">复印份数</view>
					<view class="center">
						<view class="title-bg"></view>
					</view>
				</view>
			</view>
			<view class="list-content">
				<u-number-box v-model="form.copyNum" @change="valChange"></u-number-box>
			</view>
		</view>
		<view class="card mar-10-0">
			<view class="start-center">
				<view>
					<view class="sheet-dept">备注说明</view>
					<view class="center">
						<view class="title-bg"></view>
					</view>
				</view>
			</view>
			<view>
				<u-input v-model="form.describe" type="textarea" maxlength="200" :custom-style="customStyle"
					placeholder="请填写备注说明" :height="height" :auto-height="autoHeight" />
				<view class="describe-num">{{form.describe.length}}/200</view>
			</view>
		</view>
		<ButtonAllVue btn-r="下一步" @click="next"></ButtonAllVue>
	</view>
</template>

<script>
	import ButtonAllVue from '../../../../components/Button/ButtonAll.vue'
	export default {
		props: {
			step: Number,
			form: Object
		},
		components: {
			ButtonAllVue
		},
		data() {
			return {
				listCopy: [{
					type: 1,
					name: "病历首页",
					active: true,
				}, {
					type: 2,
					name: "入院记录",
					active: true,
				}, {
					type: 3,
					name: "出院记录",
					active: true,
				}, {
					type: 4,
					name: "手术记录",
					active: false,
				}, {
					type: 5,
					name: "检验报告",
					active: false,
				}, {
					type: 6,
					name: "检查报告",
					active: false,
				}, {
					type: 7,
					name: "医嘱",
					active: false,
				}, {
					type: 8,
					name: "护理记录",
					active: false,
				}],

				autoHeight: true,
				height: 300,
				customStyle: {
					"background-color": "rgba(246,246,246)",
					"border-radius": "16px",
					"padding": "16px",
					"margin": "16px 0",
				}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				for (var i = 0; i < this.listCopy.length; i++) {
					this.listCopy[i].active = false;
				}
				this.form.listCopy.forEach(res => {
					for (var i = 0; i < this.listCopy.length; i++) {
						let item = this.listCopy[i]
						if (res.type == item.type) {
							item.active = res.active
							break
						}
					}
				})
			},
			handleContent(item) {
				this.form.listCopy = []
				item.active = !item.active
				this.listCopy.forEach(res => {
					if (res.active) {
						this.form.listCopy.push(res)
					}
				})
			},
			valChange(e) {
				this.form.copyNum = e.value
			},
			next() {
				this.$emit('updateStep', {
					step: 3,
					name: '申请人确认',
					active: false,
				})
			}
		}
	}
</script>

<style scoped>
	.card {
		background-color: white;
		border-radius: 16px;
		padding: 16px;
		box-shadow: 0 5px 1000px 1rpx #e0e2e7;
	}

	.sheet-dept {
		font-size: 20px;
		color: #333;
		font-weight: bold;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.title-bg {
		width: 48px;
		height: 15rpx;
		background-color: rgba(65, 207, 230, 0.5);
		margin-top: -10px;
	}

	.list-content {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 10px 0;
	}

	.list-item {
		margin: 0 10px;
	}

	.item-content {
		border-radius: 16px;
		background-color: rgb(228, 252, 253);
		padding: 10px;
		margin: 10px 0;
		text-align: center;
		font-size: 14px;
	}

	.active {
		background-color: rgb(103, 220, 230);
		color: white;
	}

	.describe-num {
		position: relative;
		text-align: right;
		margin-top: -40px;
		margin-right: 10px;
	}
</style>